<template>
    <div>
        <div>
            <el-form :inline="true" :model="formInline" class="demo-form-inline">
                <el-form-item label="医生名称">
                    <el-input v-model="formInline.user" placeholder="请输入查询名称" />
                </el-form-item>
                <el-form-item label="医生科室">
                    <el-input v-model="formInline.department" placeholder="请输入科室" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">查询</el-button>
                </el-form-item>
            </el-form>
        </div>
        <el-table :data="doctorList.list" style="width: 100%">
            <el-table-column prop="name" label="医生姓名" />
            <el-table-column prop="department" label="所属科室" />
            <el-table-column label="医生头像">
                <template #default="scoped">
                    <img :src="(scoped as any).row.head" style="width: 50px;" alt="">
                </template>
            </el-table-column>
            <el-table-column prop="phone" label="联系方式" />
            <el-table-column prop="sex" label="性别" />
        </el-table>
        <div class="pageInfo">
            <el-pagination v-model:current-page="pageInfo.page" v-model:page-size="pageInfo.size"
                :page-sizes="[5, 10, 15, 20]" background layout="total, sizes, prev, pager, next, jumper" :total="total"
                @size-change="handleSizeChange" @current-change="handleCurrentChange" />
        </div>
    </div>
</template>

<script setup lang="ts">
import { searchReq } from '@/api/common.api';
import { useDoctorStore } from '@/store/doctor.store';
import { ElMessage } from 'element-plus';
import { storeToRefs } from 'pinia';
import { reactive, ref } from 'vue';

// 仓库
const doctorInfo = useDoctorStore()
let { doctorList, pageInfo, total } = storeToRefs(doctorInfo)
const { listDoctorReq } = doctorInfo

// 查询
const formInline = reactive({
    user: '',
    department: ''
})


const onSubmit = () => {
    const userdata = reactive({
        page: pageInfo.value.page,
        size: pageInfo.value.size,
        name: formInline.user
    })
    searchReq(userdata).then(res => {
        if (res.data.code) {
            ElMessage.success(res.data.msg)
            doctorList.value.list = res.data.data
        }
    })
}

// 分页

const handleSizeChange = () => {
    console.log(123132);

}
const handleCurrentChange = () => {
    console.log('qwe');
}

</script>

<style scoped lang="scss">
.pageInfo {
    margin-top: 15px;
}
</style>